import {Directive, ElementRef, Input, SimpleChange} from '@angular/core';
import {debounce, countTransform, flowTransform} from '../utils';

const $: any = (window as any).$;
const echarts: any = (window as any).echarts;

@Directive({
    selector: '[appGraph]'
})
export class GraphDirective {
    @Input() appGraph: any;
    chart: any; // 图表本身
    resizeNamespace: string = 'resize.' + Date.now(); // 图表绑定到resize事件，需要一个命名空间
    $elem: any;
    constructor(private el: ElementRef) {
        this.$elem = $(el.nativeElement);
    }
    renderChart() {
        const op: any = {
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series : [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 50,
                    roam: true,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    data: [],
                    links: [],
                    lineStyle: {
                        normal: {
                            width: 2,
                            curveness: 0
                        }
                    },
                    itemStyle: {
                        color: '#0099FF'
                    },
                    force: {
                        repulsion: 1000
                    },
                }
            ]
        };
        if (this.appGraph.data) {
            op.series[0].data = this.appGraph.data;
        }
        if (this.appGraph.links) {
            op.series[0].links = this.appGraph.links;
        }
        this.chart.clear();
        this.chart.setOption(op, false);
    }
    // 初始化画布，绑定resize事件
    initChart() {
        this.chart = echarts.init(this.el.nativeElement);
        const resize = this.chart.resize;
        const resizeNamespace = this.resizeNamespace;
        $(window).off(resizeNamespace);
        $(window).on(resizeNamespace, debounce(resize, 200, false));
    }

    // 解除resize
    relieve() {
        const resizeNamespace = this.resizeNamespace;
        $(window).off(resizeNamespace);
        if (this.chart) {
            this.chart.dispose();
        }
    }
    ngOnChanges(changes: {
        [propKey: string]: SimpleChange
    }) {
        const options = changes['appGraph'];
        if (options && options.previousValue !== options.currentValue && options.currentValue) {
            this.relieve();
            this.initChart();
            this.renderChart();
        }
    }
    ngOnInit() {
    }
    ngOnDestroy() {
        this.relieve();
    }
    resize() {
        if (this.chart) {
            this.chart.resize({width: 0, height: 0});
            this.chart.resize({width: this.$elem.parent().width(), height: this.$elem.parent().height()})
        }
    }

}
